<template>
  <div class="menuContainer">
      <vue-scroll
                :ops="ops"
            >
        <ul class="menuBox hoverBg hoverFont">
            <div class="searchBox" v-if="!defaultFold">
                <el-input  placeholder="请输入搜索内容"  suffix-icon="el-icon-search" v-model="searchValue" @input="searchChange"> </el-input>
            </div>
            <div class="searchMenuList" v-if="searchValue">
                <p class="searchResult">共找到<span>{{searchSum}}</span>个相关结果</p>
                <li v-for="item in searchList" :key="item.id"><a @click="openMenu(item)" :title="item.name">{{item.name}}</a></li>
            </div>
            <div class="menuList" v-if="!searchValue">
                <li class="menuOne" @mouseenter="handleMouseEnterR($event,recentListMenu)" @mouseleave="handleMouseLeaveR($event,recentListMenu)">
                    <i class="fontColor iconfont icon-shijian"></i>
                    <span v-if="!defaultFold">最新访问</span>
                    <i v-if="!defaultFold" class="icon-icon-angle-right iconfont right_anglt"></i>
                </li>
                <p class="fg" v-if="!defaultFold"></p>
                <li :class='["menuOne",defaultFold? "" : ""]'  v-for="item in menuTree" :key="item.id"  @mouseenter="handleMouseEnter($event,item)" @mouseleave="handleMouseLeave($event,item)">
                    <i :class="`fontColor iconfont ${item.ico == null ? 'icon-icon-datum-system' : item.ico}`"></i>
                    <span v-show="!defaultFold">{{item.name.slice(0,6)}}</span>
                    <i v-show="!defaultFold" class="icon-icon-angle-right iconfont right_anglt"></i>
                </li>
            </div>
        </ul>
      </vue-scroll>
      
      <div class="menuExpand" v-show="menuExpandFlag" :style="`left:${sWidth-6}px`"  @mouseenter="handleMouseEnter()" @mouseleave="handleMouseLeave()">
          <ul>
              <li v-for="itemOne in menuItem.children" :key="itemOne.id">
                  <ul >
                      <li v-for="itemTwo in itemOne.children" :key="itemTwo.id">
                          <p class="itemTwoTitle">{{itemTwo.name}}</p>
                          <div class="menuTwoList">
                              <span class="menuThree" v-for="itemThree in itemTwo.children" :key="itemThree.id" @click="openMenu(itemThree)">
                                  {{itemThree.name}}
                              </span>
                          </div>
                      </li>
                  </ul>
              </li>
          </ul>
      </div>

      <div class="menuExpand menuExpandR " v-show="menuExpandFlagR" :style="`left:${sWidth-6}px`"  @mouseenter="handleMouseEnterR()" @mouseleave="handleMouseLeaveR()">
          <ul class="hoverBg hoverFont">
              <li v-for="item in menuItemR" :key="item.id">
                <span @click="openMenu(item)">
                    {{item.menuName}}
                </span>
              </li>
          </ul>
      </div>
  </div>
</template>

<script>
import { createNamespacedHelpers } from 'vuex';
const { mapState,mapMutations, mapActions } = createNamespacedHelpers('homeModule');
const { mapMutations: mapTagMutations } = createNamespacedHelpers('tagModule');
import appUtil from '~/assets/utils/appUtil';
// import { convertXfunction } from '@/utils/converter/urlConverter.js';
export default {
    name: 'Menu',
    data () {
        return {
            searchValue:'', // 搜索框中的值
            searchList:[], // 搜索出的列表
            searchSum:0, // 搜索出的总条数
            ops: {
                rail: {
                    opacity: '0',
                },
                bar: {
                    onlyShowBarOnScroll: false,
                    background: '#c6c6c6',
                    size: '3px',
                    right:0
                },
            },
            menuExpandFlag: false, // 菜单展开标识
            menuExpandFlagR: false, // 最近访问展开标识
            menuItem: {}, // 展示的当前滑过详情菜单
            menuItemR:{} // 展示的当前滑过最近访问详情菜单
        };
    },
    computed: {
        ...mapState([
            'menuTree',
            'defaultFold',
            'sWidth',
            'recentListMenu',
            'menuFlag'
        ]),
    },
    watch: {
        // 只监听数据本身，其属性变化不会触发回调
        menuFlag () {
            this.slibarExpand();
        },
        
    },
    components: {
    },
    created () {
        // 获取菜单列表
        this.getMenuAsync();
        // 获取最近访问菜单
        this.getRecentListAsync();
        let that = this;
        window.addTabToParent = function(title,url){
            let menu = {
                name:title,
                url:url
            };
            that.addTag(menu);
        };
    },
    methods: {
        ...mapTagMutations([
            'addTag'
        ]),
        ...mapMutations([
            'slibarExpand'
        ]),
        ...mapActions([
            'getMenuAsync',
            'getRecentListAsync'
        ]),
        // 鼠标移入菜单
        handleMouseEnter (event, data) {
            // if(!this.defaultFold){ // 菜单折叠滑动不展示详细列表
            //     return;
            // }
            // console.log(data);
            this.menuExpandFlag = true;
            if(data === undefined){
                return;
            }
            this.menuItem = data;
        },
        // 鼠标移出菜单
        handleMouseLeave () {
            this.menuExpandFlag = false;
        },
        // 鼠标移入最近访问
        handleMouseEnterR (event, data) {
            this.menuExpandFlagR = true;
            if(data === undefined){
                return;
            }
            this.menuItemR = data;
        },
        // 鼠标移出最近访问
        handleMouseLeaveR () {
            this.menuExpandFlagR = false;
        },
        // 打开菜单
        openMenu (menu) {
            if (!menu.url || menu.url === '') {
                return;
            }
            this.menuVisit(menu);
            // 打开方式
            if (menu.isNew) {
                window.open(menu.url);
            } else if (menu.isBuiltin) {
                // 内置页面
                this.addTag(menu);
            } else {
                // this.addTag({url: menu.url, title: menu.title, id: menu.id, isBuiltin: menu.isBuiltin, convertRules: [convertXfunction]});
                this.addTag(menu);
            }
            this.menuExpandFlag = false;
            this.menuExpandFlagR = false;
        },
       
        // 打开的菜单加入最近访问
        menuVisit (menu) {
            let param = {
                menuName:menu.name,
                menuid:menu.menuid || menu.id, // 最近访问列表拿menuid 菜单拿id
                userId:appUtil.getSes('userId'),
                xfunctionId:appUtil.getParamFromUrl(menu.url,'xFunctionId'),
                url:menu.url
                // url:encodeURI(menu.url)
            };
            this.$axios.post('/ptp-page/apis/menu/menuVisit',param).then(() => {
                this.getRecentListAsync();
            });
        },
        // 搜索菜单
        searchChange () {
            let value = this.searchValue;
            let arr = appUtil.getSes('dfp_menu_lv3');
            let searchList = [];
            let searchSum = 0;
            for (let i=0;i<arr.length;i++){
                if (arr[i].name.indexOf(value) !== -1){
                    searchList.push(arr[i]);
                    searchSum++;
                }
            }
            this.searchSum = searchSum;
            this.searchList = searchList;
        }
    }
};
</script>

<style scoped lang="scss">
    .menuContainer{
        background: #fff;
        height: 100%;
        color: #333;
        position: relative;
         .__rail-is-vertical{
            right:-2px!important;
        }
        .menuBox{
            color: #333;
            font-size: 14px;
            .menuList{
                li{
                    height: 40px;
                    line-height: 40px;
                    cursor: pointer;
                    span{
                        animation: op 0.4s linear forwards;
                    }
                }
            }
            .searchMenuList{
                .searchResult{
                    margin: 10px 16px 4px;
                    color: #999999;
                    font-size: 12px;
                    span{
                        color: red;
                    }
                }
                li{
                    height: 30px;
                    line-height: 30px;
                    cursor: pointer;
                    overflow: hidden;
                    a{
                        padding-left: 24px;
                    }
                }
            }
            .menuOne{
                position: relative;
                .iconfont{
                    margin-left:16px;
                    margin-right: 10px;
                }
                .right_anglt{
                    font-size: 12px;
                    margin-right: 16px;
                    position: absolute;
                    right: 6px;
                }
            }
            .menuOne:hover{
                box-shadow:0px 2px 10px 0px rgba(0,0,0,0.3);
            }
            .searchBox{
                margin: 0px 16px 0 16px;
                padding-top: 8px;
            }
            .fg{
                width: 100%;
                height: 10px;
                background: #EEEEEE;
            }
            .foldLi{
                text-align: center;
                i{
                    margin: 0!important;
                }
            }
        }
        .menuExpand{
            position: absolute;
            top: 0;
            // left: 200px;
            z-index: 22;
            width: 600px;
            height: 100%;
            padding: 0 20px 0px 20px;
            box-shadow:0px 2px 10px 0px rgba(0,0,0,0.3);
            background: #fff;
            overflow: auto;
            border-radius: 4px;
            .itemTwoTitle{
                color: #333333;
                font-size: 16px;
                margin-top: 20px;
                font-weight: bold;
                padding-left: 6px;
            }
            .menuTwoList{
                padding-bottom: 10px;
                span{
                    color: #333333;
                    font-size: 14px;
                    margin-right: 20px;
                    margin-top: 8px;
                    cursor: pointer;
                    display: inline-block;
                    padding: 4px 8px;
                }
            }
        }
        .menuExpandR{
            width: 250px;
            padding: 0;
            li{
                height: 30px;
                line-height: 30px;
                padding: 0 16px;
                cursor: pointer;
                span{
                    overflow: hidden;
                    display: inline-block;
                    width: 100%;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                }
            }
        }
    }
    @keyframes op{
        from{
            opacity: 0;
        }
        to{
            opacity: 1;
        }
    }
</style>
